<template>
    <div class="common-layout">
        <el-container>
        <el-header>
            <h2>{{companyInfor.companyName}}</h2>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <el-card shadow="hover">
                        <div class="box-card">
                            <h2>公司简介</h2>
                            <p>{{companyInfor.companySimplyIntroduce
                            }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-card shadow="hover">
                        <div class="box-card">
                            <p> 公司环境 </p>
                                <el-image  v-if="companyInfor.companyImg" :src="url + companyInfor.companyImg" alt="" style="width: 200px; height: 200px;"/>
                                
                                <!-- {{url + companyInfor.companyImg}} -->
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover">
                        <div class="box-card">
                            <h2>联系方式</h2>
                            <p>地址：{{companyInfor.companyAddress
                            }}</p>
                            <p>电话：{{companyInfor.companyTelephone
                            }}</p>
                            <p>邮箱：{{companyInfor.companyEmail}}</p>
                            <p>二维码：</p> 

                                <el-image  v-if="companyInfor.companyCode" :src="url + companyInfor.companyCode" alt="" style="width: 100px; height: 100px;"/>

                            <!-- {{url + companyInfor.companyCode }} -->   
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        </el-container>
    </div>



</template>
<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios';
const companyInfor = ref(
    {
        // name: '',
        // address: '',
        // telePhone: '',  
        // simplyIntroduce: '',
        // email: '',
        // img: '',
        // code: ''  
    }
);

const url = ref("http://localhost/file/downLoad?fileName=");



// 定义一个方法当页面加载后立马执行的代码
onMounted(()=>{
    getList();
})
//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = ()=>{
    // 使用axios调用后端接口获取数据
    axios.get('/company/companySelectAll')
    .then(resp=>{
        let result =  resp.data;
        if(result.code==1){
            //console.log(result.data.list[0]);
            companyInfor.value=result.data.list[0];
            
            console.log(companyInfor.value);            
        }
    }) 
}

</script>

<style>
    h2{text-align: center;}
</style>
